<template>
    <view class="load-more">
        <view :class="[{ 'load-custom': custom, fixed: fixed }, 'nodata']" :style="{ background: bg }" v-if="loadingType === 'nodata'">
            <template v-if="!custom">
                <text class="nodata-icon hx-icon-wuneirong"></text>
                <view class="nodata-text">{{ text }}</view>
            </template>
            <template v-else>
                <slot />
            </template>
        </view>
        <uni-load-more color="#BCBCBC" v-if="loadingType === 'nomore' || loadingType === 'loading'" :status="loadingType" :show-icon="loadingType === 'loading'" />
    </view>
</template>

<script>
export default {
    name: "load-more",
    data() {
        return {}
    },
    props: {
        loadingType: {
            type: String,
            default: ""
        },
        bg: {
            type: String,
            default: "transparent"
        },
        fixed: {
            type: Boolean,
            default: false
        },
        custom: {
            type: Boolean,
            default: false
        },
        text: {
            type: String,
            default: "暂无数据"
        }
    },
    methods: {}
}
</script>

<style lang="scss" scoped>
.load-more {
    min-height: 80rpx;
}
.nodata {
    height: 333rpx;
    width: 100%;
    box-sizing: border-box;
    padding: 40upx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .nodata-image {
        width: 240upx;
        height: 240upx;
    }
    .nodata-icon {
        font-size: 92upx;
        color: #999;
        margin-bottom: 10rpx;
    }
    .nodata-text {
        color: #989898;
        font-size: 26upx;
    }
}
.fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
